<template>
  <div>
    <div>
      <we-button type="primary" @click="unitMaintain = true" size="small"
        >单位维护
      </we-button>
      <we-button type="primary" @click="fillingUnits = true" size="small"
        >套表填报单位名录
      </we-button>
      <we-button type="primary" @click="reportingPeriod = true" size="small"
        >设置报告期
      </we-button>
      <we-button type="primary" @click="reportCover = true" size="small"
        >设置报表封面
      </we-button>
    </div>

    <!-- 单位维护 -->
    <el-dialog
      title="单位维护"
      :visible.sync="unitMaintain"
      :close-on-click-modal='false'
      width="40%">
      <el-row :gutter="20" style="margin-top:10px;">
        <el-col :span="15">
          <div>
            <el-tree
              style="height:280px;border:1px solid #eee"
              :data="data"
              node-key="id"
              default-expand-all
              draggable
              :allow-drop="allowDrop">
            </el-tree>
            <div style="margin-top:10px;">
              <span>单位名称：</span>
              <el-input size="mini" placeholder="填报单位" style=width:80%></el-input>
            </div>
          </div>
        </el-col>
        <el-col :span="9">
          <div style="border:1px solid #eee;padding:60px 0;color:#ff0000;text-align:center">
            <p>可拖拽进行排序；</p>
            <div style="height:10px"></div>
            <p>仅支持同级排序！</p>
          </div>
          <div style="text-align:center;margin:20px 0">
            <we-button @click="unitMaintain = true" size="small"
              >备份
            </we-button>
          </div>
          <div style="text-align:center">
            <we-button @click="unitMaintain = true" size="small"
              >恢复
            </we-button>
          </div>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <we-button size="mini" type="primary" style="margin-right:30px;"
          >删 除</we-button>
        <we-button size="mini" type="primary" style="margin-right:30px;"
          >新 增</we-button>
        <we-button size="mini" type="primary" style="margin-right:30px;"
          >修 改</we-button>
        <we-button size="mini" type="primary" style="margin-right:30px;"
          >机构数同步</we-button>
        <we-button size="mini" @click="unitMaintain = false"
          >关 闭</we-button>
      </div>
    </el-dialog>
    <!-- 单位维护 -->

    <!-- 套表填报单位名录 -->
    <el-dialog
      title="单位维护"
      :visible.sync="fillingUnits"
      :close-on-click-modal='false'
      width="40%">
      <el-select v-model="value" filterable size="mini" style="width:100%">
        <el-option
          v-for="item in option1"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <div style="display:flex;justify-content:space-between;">
        <p style="margin:10px 0;font-weight:600">选择单位</p>
        <el-checkbox v-model="allCheck" @change="checkedAll" style="margin:10px 0;">全选</el-checkbox>
      </div>
      <div>
        <el-tree
          style="height:280px;border:1px solid #eee;padding:15px"
          :data="data"
          node-key="label"
          default-expand-all
          show-checkbox
          :check-strictly="true"
          @check="commonUseTree"
          ref="tree">
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <we-button size="mini" @click="fillingUnitsConfirmSet" type="primary" style="margin-right:30px;"
          >确认设置</we-button>
        <we-button size="mini" @click="fillingUnits = false"
          >关 闭</we-button>
      </div>
    </el-dialog>
    <!-- 套表填报单位名录 -->

    <!-- 设置报告期 -->
    <el-dialog
      title="设置报告期"
      :visible.sync="reportingPeriod"
      :close-on-click-modal='false'
      width="550px">
      <div>
        <el-radio-group class="radio_group" size="small" v-model="radio1">
          <div v-for="(item,index) in 10" :key="index" style="margin-top:5px">
            <el-radio-button :label="index">{{index + '年水利人事统计'}}</el-radio-button>
          </div>
        </el-radio-group>
        <div style="margin-top:15px">
          当前报告期：<el-input disabled="disabled" :placeholder="radio1 + '年水利人事统计'" size="mini" style="width:70%"></el-input>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <we-button size="mini" type="primary" style="margin-right:30px;"
          >确认设置</we-button>
        <we-button size="mini" @click="reportingPeriod = false"
          >关 闭</we-button>
      </div>
    </el-dialog>
    <!-- 设置报告期 -->

    <!-- 设置报表封面 -->
    <el-dialog
      title="设置报表封面"
      :visible.sync="reportCover"
      :close-on-click-modal='false'
      width="40%"
      top="10vh">
      <el-row :gutter="20">
        <el-col :span="12">
          <span class="span_rel">选择套表</span>
          <div class="bor_line" style="height:176px;overflow-y:auto">
            <el-radio-group class="radio_group2" size="small" v-model="radio1">
              <div v-for="(item,index) in 10" :key="index" style="margin-top:5px">
                <el-radio-button :label="index">{{index + '年水利人事统计'}}</el-radio-button>
              </div>
            </el-radio-group>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <span class="span_rel">填报单位</span>
            <div class="bor_line">
              <el-input disabled="disabled" placeholder="填报单位" size="mini"></el-input>
            </div>
          </div>
          <div>
            <span class="span_rel">报告期</span>
            <div class="bor_line">
              <el-input disabled="disabled" placeholder="填报单位" size="mini"></el-input>
            </div>
          </div>
          <div>
            <span class="span_rel">套表明</span>
            <div class="bor_line">
              <el-input disabled="disabled" placeholder="填报单位" size="mini"></el-input>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top:10px;">
        <el-col :span="12">
          <div>
            <span class="span_rel">选择单位</span>
            <div class="bor_line">
              <p>填报单位</p>
              <div>
                <div></div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <span class="span_rel">填写相关信息</span>
            <div class="bor_line">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
                <el-form-item label="报送单位:" prop="unit">
                  <el-input v-model="ruleForm.unit" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="负责人:" prop="people1">
                  <el-input v-model="ruleForm.people1" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="报送时间:" prop="time">
                  <el-date-picker
                    v-model="ruleForm.time"
                    style="width:100%"
                    size="mini"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="填报人:" prop="people2">
                  <el-input v-model="ruleForm.people2" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="联系电话:" prop="tel">
                  <el-input v-model="ruleForm.tel" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="手机:" prop="phone">
                  <el-input v-model="ruleForm.phone" size="mini"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <we-button size="mini" @click="fillingUnits = true" type="primary" style="margin-right:30px;"
          >套表填报单位名录</we-button>
        <we-button size="mini" type="primary" style="margin-right:30px;"
          >封面预览</we-button>
        <we-button size="mini" type="primary" style="margin-right:30px;"
          >确认设置</we-button>
        <we-button size="mini" @click="reportingPeriod = false"
          >关 闭</we-button>
      </div>
    </el-dialog>
    <!-- 设置报表封面 -->
  </div>
</template>

<script>
import WeButton from '@/components/WeButton'
import { getAction, postAction, deleteAction, putAction } from '@/api/manage'

export default {
  components: {
    WeButton
  },
  data () {
    return {
      unitMaintain: false, // 单位维护
      fillingUnits: false, // 套表填报单位名录
      reportingPeriod: false, // 设置报告期
      reportCover: false, // 设置报表封面
      data: [{
        id: 1,
        label: '填报单位',
        children: [{
          id: 4,
          label: '哈哈哈'
        }, {
          id: 4,
          label: '嘻嘻嘻'
        }]
      }],
      option1: [
        { value: '1', label: '单位1' },
        { value: '2', label: '单位2' },
        { value: '3', label: '单位3' }
      ],
      value: '', // 套表填报单位名录 选中的
      allCheck: false, // 套表填报单位名录 全选
      radio1: '0', // 设置报告期 单选
      ruleForm: {
        unit: '',
        people1: '',
        time: '',
        people2: '',
        tel: '',
        phone: ''
      },
      rules: {
        unit: [
          { required: true, message: '请输入报送单位', trigger: 'change' }
        ],
        people1: [
          { required: true, message: '请选择参加时间', trigger: 'change' }
        ],
        people2: [
          { required: true, message: '请选择转正时间', trigger: 'change' }
        ],
        tel: [
          { required: true, message: '请填写党派内职务', trigger: 'blur' }
        ]
      }
    }
  },
  created () {

  },
  mounted () {

  },
  methods: {
    /**
     * 套表填报单位名录 确认设置
     */
    fillingUnitsConfirmSet () {

    },
    /**
     * 拖拽排序
     */
    allowDrop (draggingNode, dropNode, type) {
      if (draggingNode.level === dropNode.level) {
        if (draggingNode.parent.id === dropNode.parent.id) {
          // 向上拖拽 || 向下拖拽
          return type === 'prev' || type === 'next'
        }
      } else {
        // 不同级进行处理
        return false
      }
    },
    /**
     * 常用统计分析树节点
     */
    commonUseTree (a, b) {
      if (b.checkedKeys.length > 0) {
        this.$refs.tree.setCheckedKeys([a.label])
      }
    },
    /**
     * 全选
     */
    checkedAll () {
      if (this.allCheck) {
        // 全选
        this.$refs.tree.setCheckedNodes(this.data)
      } else {
        // 取消选中
        this.$refs.tree.setCheckedKeys([])
      }
    }
  }
}
</script>

<style scoped lang="less">
  .radio_group /deep/ .el-radio-button__inner {
    width: 500px;
    text-align: left !important;
  }
  .radio_group2 /deep/ .el-radio-button__inner {
    width: 300px;
    text-align: left !important;
  }
  .bor_line {
    border: 1px solid #ddd;
    padding: 20px 10px 10px;
  }
  .span_rel {
    position: relative;
    top: 8px;
    background: #fff;
    padding: 0 5px;
    left: 10px;
    font-weight: 600;
    color: #15428b;
  }
  .el-form-item {
    margin: 0;
  }
</style>
